@charset "UTF-8";
@use 'sass:math';
//////////////////////栅格默认配置 START////////////////////
//是否开启百分比
$is_percentage:false !default;
//是否开启boxsizing
$is_box_sizing: false !default;
//开启百分比默认栅格总百分比
$grid_precentage_width: 100% !default;
//默认单元栅格宽度
$grid_width: 1152px !default;
//默认最大宽度
$max_width: 1920px !default;
//默认槽宽
$gutters: (
  none: 10px, // 无槽间距
  small: 10px, // 小槽间距
  middle: 16px, // 默认槽间距
  large: 20px // 大槽间距
) !default;
//默认栅格数
$columns: 24 !default;
//默认分割符号
$separator: "-" !default;
//默认包裹名
$container:'.container' !default;
//默认栅格栏行名
$grid_row_name:'.row' !default;
//默认栅格栏列名
$grid_col_name:'.col' !default;
//////////////////////栅格默认配置 END////////////////////
//栅格容器
@mixin grid_container {
  @if $is_percentage {
    min-width: $grid_width;
    max-width: $max_width;
    width: $grid_precentage_width;
    //解决ie6不支持min-width
    // _width:expression(this.width < #{$grid_width} ? #{$grid_width} : this.width<#{$grid_precentage_width}?this.width:#{$grid_precentage_width});
  } @else {
    width: $grid_width;
  }
  @extend %clearfix;
  margin: 0 auto;
}
//栅格容器
@mixin grid_row() {
  @extend %clearfix;
  &:last-child {
    margin-bottom: 0;
  }
}

// 获得栅格宽度fn: get_width
// param: $n 栅格数
// param: $cols 默认列数
// param: $def-gutter 槽宽
@function get_width($n, $cols: $columns, $gutter: map-get($gutters, def)) {
  @if $is_percentage {
    @if is_box_sizing {
      @return percentage(math.div($n, $cols));
    }
    @else {
      @return percentage(math.div($n, $cols) - math.div($gutter, $grid_width));
    }
  }
  @else {
    @if is_box_sizing {
      @return math.div($grid_width, $cols) * $n;
    }
    @else {
      @return math.div($grid_width, $cols) * $n - $gutter;
    }
  }
}

// 获得栅格偏移量fn: get_offset
// param: $n 栅格数
// param: $cols 默认列数
// param: $def-gutter 槽宽
@function get_offset($n, $cols: $columns, $gutter:$def_gutter) {
  @if $is_percentage {
    @if is_box_sizing {
      @return percentage(math.div($n, $cols));
    }
    @else {
      @return percentage(math.div($n, $cols) - math.div($gutter, $grid_width));
    }
  }
  @else {
    @return math.div($grid_width, $cols) * $n;
  }
}

@function enumerate($grid_col_name, $start, $cols, $separator) {
  $str: '';
  @for $n from $start through $cols {
    @if $n==$cols {
      $str: #{$str}#{$grid_col_name}#{$separator}#{$n}
    }
    @else {
      $str: #{$str}#{$grid_col_name}#{$separator}#{$n}#{','}
    }
  }
  @return $str;
}

// 栅格工具基础
// param: $def_gutter 槽宽
@mixin grid_unit_base($gutter: $def_gutter) {
  float: left;
  @if $is_box_sizing {
    box-sizing: border-box;
  }
  @if $is_percentage {
    $percentage_gutter: percentage(math.div(math.div($gutter, $grid_width), 2));
    @if $gutter !=0 {
      padding: {
        left: $percentage_gutter;
        right: $percentage_gutter;
      }
    }
  }
  @else {
    $half_gutter: math.div($gutter, 2);
    @if $gutter !=0 {
      padding: {
        left: $half_gutter;
        right: $half_gutter;
      }
    }
  }
}

// 栅格栏
// param: $n 栅格数
// param: $cols 默认列数
// param: $gutter 槽宽
@mixin grid($n, $cols: $columns, $gutter: $def_gutter) {
  @if $n==$cols {
    #{$grid_col_name}#{$separator}#{$n} {
      margin: 0 auto;
      width: get_width($n, $cols, $gutter);
    }
  }
  @else {
    @include grid_unit_base($gutter);
    width: get_width($n, $cols, $gutter);
  }
}

// 栅格栏自动生成
// param: $n 栅格数
// param: $cols 默认列数
// param: $gutter 槽宽
@mixin auto_grids($cols: $columns, $gutters: $gutters) {
  $gutter: map-get($gutters, middle);
  //包裹样式
  #{$container} {
    @include grid_container;
  } // #{enumerate($grid_col_name, 1, $cols-1, $separator)}{ //$cols - 1排除最后一个
  #{$grid_row_name} {
    @include grid_container; // 由于存在全屏方式故，将其修改到row上，修正row row的宽度
    @include grid_row;
    #{$grid_row_name} {
      display: block;
      width: auto;
      margin: 0 math.div(-$gutter, 2);
    }
  }
  #{enumerate($grid_col_name, 1, $cols, $separator)} {
    // 最大栅格同样应该保留
    @include grid_unit_base($gutter);
  }
  @for $n from 1 through $cols {
    @if $n==$cols {
      #{$grid_col_name}#{$separator}#{$n} {
        margin: 0 auto;
        width: get_width($n, $cols, $gutter);
      }
    }
    @else {
      #{$grid_col_name}#{$separator}#{$n} {
        width: get_width($n, $cols, $gutter);
      }
      #{$grid_col_name}#{$separator}offset#{$separator}#{$n} {
        margin-left: get_offset($n, $cols, $gutter);
      }
    }
  }
  @include grid_col_space($gutters, $cols);
  @include grid_row_space($gutters);
}

// 此类名主要使用指定当前列的内间距
@mixin grid_col_space($gutters, $cols:$columns) {
  @each $key, $value in $gutters {
    @for $n from 1 through $cols {
    @if $n==$cols {
    }
    @else {
      #{$grid_col_name}#{$separator}space#{$separator}#{$key}, #{$grid_col_name}#{$separator}space#{$separator}#{$key}>#{$grid_col_name}#{$separator}#{$n} {
        padding: 0 math.div($value, 2);
        // #{$grid_col_name} {
        //   padding: 0 math.div($value, 2);
        // }
      }
    }
  }

  }
}
// 此类名主要使用在列内再次套用行的情况使用，将其放在顶级row类上
// eg: div.row.row-space-{small|middle|large}>(div.col-8>div.row>div.col-12+div.col-12)+div.col-16
@mixin grid_row_space($gutters) {
  @each $key, $value in $gutters {
    #{$grid_row_name}#{$separator}space#{$separator}#{$key} {
      #{$grid_row_name} {
        width: auto;
        margin: 0 math.div(-$value, 2);
      }
    }
  }
}
